import tagA from "./components/tag-a/index.marko";
import tagB from "./components/tag-b/index.marko";
<${input} class=["a", "b"] other=input.other/>
<${input.x} class=["a", "b"] other=input.other/>
<${input.show ? "div" : null} class=["a", "b"] other=input.other/>
<${input.show ? "div" : null} class=["a", "b"] other=input.other>
  Body Content
</>
<${input.show && "div"} class=["a", "b"] other=input.other/>
<${input.large ? "h1" : "h2"} class=["a", "b"] other=input.other/>
<${input.showTagA ? tagA : tagB} class=["a", "b"] other=input.other class=["a", "b"] other=input.other/>
<${input.showTagA && tagA} class=["a", "b"] other=input.other/>
<${input.showTagA && tagA} class=["a", "b"] other=input.other>
  Body content
</>
<${input.tag || tagA} class=["a", "b"] other=input.other/>
$ const largeHeading = input.isLarge && "h1";
<${largeHeading || "h2"} class=["a", "b"] other=input.other/>
<${global.x = "a" + "b"} class=["a", "b"] other=input.other/>
<${"h" + input.level} class=["a", "b"] other=input.other/>
<${`h${input.level}`} class=["a", "b"] other=input.other/>
$ const tagConstA = "a";
<${tagConstA} class=["a", "b"] other=input.other/>
$ const tagConstB = input.show ? "div" : null;
<${tagConstB} class=["a", "b"] other=input.other/>
$ let tagLazyAssign;
$ tagLazyAssign = "a";
<${tagLazyAssign} class=["a", "b"] other=input.other/>
$ tagLazyAssign = input.show ? "div" : null;
<${tagLazyAssign} class=["a", "b"] other=input.other/>